<template>
  <div class="post-detail-overlay" v-if="postModule.selectedPost">
    <div class="post-detail-modal container">
      <div class="post-detail-header">
        <h2>{{ postModule.selectedPost.title }}</h2>
        <button @click="closeDetail" class="close-button">&times;</button>
      </div>
      
      <div class="post-meta">
        作者: {{ postModule.selectedPost.author }} | 
        分类: {{ postModule.getCategoryName(postModule.selectedPost.categoryId) }} | 
        {{ formatRelativeTime(postModule.selectedPost.createdAt) }}
      </div>
      
      <div class="post-content">
        {{ postModule.selectedPost.content }}
      </div>
      
      <div class="comments-section">
        <h3>评论</h3>
        
        <div class="comment-form">
          <h4>添加评论</h4>
          <div class="form-group">
            <label for="commentAuthor">姓名:</label>
            <input id="commentAuthor" v-model="commentModule.newComment.author" placeholder="请输入姓名" />
          </div>
          <div class="form-group">
            <label for="commentContent">评论内容:</label>
            <textarea id="commentContent" v-model="commentModule.newComment.content" placeholder="请输入评论内容"></textarea>
          </div>
          <button @click="addComment" class="btn">提交评论</button>
        </div>
        
        <div class="comments-list">
          <div class="comment-item" v-for="comment in postComments" :key="comment.id">
            <div class="comment-content">{{ comment.content }}</div>
            <div class="comment-meta">
              <span>作者: {{ comment.author }}</span>
              <span>{{ formatRelativeTime(comment.createdAt) }}</span>
            </div>
          </div>
          <div v-if="postComments.length === 0">暂无评论</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatRelativeTime } from '../modules/utils.js';

export default {
  props: ['appModule'],
  data() {
    return {
      // 组件数据直接引用应用模块
    };
  },
  computed: {
    postModule() {
      return this.appModule.postModule;
    },
    commentModule() {
      return this.appModule.commentModule;
    },
    postComments() {
      if (!this.postModule.selectedPost) return [];
      return this.commentModule.comments.filter(comment => 
        comment.postId === this.postModule.selectedPost.id
      );
    }
  },
  methods: {
    formatRelativeTime,
    closeDetail() {
      this.postModule.viewPost(null);
    },
    async addComment() {
      this.appModule.state.error = '';
      
      // 验证输入
      if (!this.commentModule.newComment.author || !this.commentModule.newComment.content) {
        this.appModule.state.error = '请填写姓名和评论内容';
        return;
      }
      
      // 设置关联的文章ID
      this.commentModule.newComment.postId = this.postModule.selectedPost.id;
      
      try {
        await this.commentModule.saveComment(this.commentModule.newComment);
      } catch (error) {
        this.appModule.state.error = error.message;
      }
    }
  }
};
</script>
</file>